<template>
  <a-modal
    :title="$t('edit')+$t('versionDepend')"
    :visible="visible"
    @cancel="()=>{visible=!visible}"
    :destroyOnClose="true"
    :keyboard="false"
    :maskClosable="false"
    :width="900"
    @ok="saveDepend"
  >
    <div style="height:600px" id="dependModal">
      <a-table
        :columns="columns"
        :rowKey="(record, index) => index"
        :data-source="tbData"
        class="h100"
        :pagination="false"
        :scroll="{x:800,y:550}"
      >
        <template
          slot-scope="text"
          v-for="column in columns.filter(item => !item.special)"
          :slot="column.scopedSlots.customRender">
          <table-ellipsis :text="text||'_'" :key="column.dataIndex"></table-ellipsis>
        </template>
        <template
          slot="minDependencyVersion"
          slot-scope="text,record"
        >
          <a-select
            v-model="record.dependSoftwareVersion"
            allowClear
            showSearch
            :filterOption="$commonFun.filterOption"
            :getPopupContainer="getPopupContainer"
            style="width:100%"

          >
            <a-select-option
              v-for="(item,index) in record.versions"
              :key="index"
              :value="item.name"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </template>
      </a-table>
    </div>

  </a-modal>
</template>
<script>
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { STable } from '@/components'
import { editDependsColumns } from '../config/list'
export default {
  name: 'ManagedServicesEditDepends',
  components: { tableEllipsis, STable },
  props: {
    serviceInfor: {
      type: Object,
      default: () => {
        return {}
      }
    },
    modelId: {
      type: String,
      default: ''
    },
    dependDetailObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      columns: editDependsColumns,
      visible: false,
      tbData: []
    }
  },
  methods: {
    // 获取零件列表
    getEcuList () {
      const vm = this
      vm.$api.versionEcuSelect({ modelId: vm.modelId }, 'PROD').then(res => {
        res.data.forEach(item => {
          // eslint-disable-next-line no-param-reassign
          item.dependSoftwareVersion = vm.dependDetailObj[item.ecuModuleId] || ''
        })
        vm.tbData = res.data
      })
    },
    saveDepend () {
      const vm = this
      console.log(vm.tbData)
      const paramsData = {
        modelId: vm.modelId,
        serviceId: vm.serviceInfor.serviceId,
        data: []
      }
      vm.tbData.forEach(item => {
        if (item.dependSoftwareVersion) {
          paramsData.data.push({
            ecuId: item.id,
            ecuModuleId: item.ecuModuleId,
            ecuName: item.name,
            dependSoftwareCode: item.versions[0] && item.versions[0].softwareCode,
            dependSoftwareVersion: item.dependSoftwareVersion
          })
        }
      })
      vm.$api.editDependByModel(paramsData).then(() => {
        vm.$message.success(vm.$t('success'))
        vm.visible = false
      })
    },
    getPopupContainer () {
      return document.getElementById('dependModal')
    }
  },
  watch: {
    visible: {
      handler (val) {
        if (val) {
          this.getEcuList()
        }
      },
      immediate: true

    }
  }
}
</script>
